<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" bg-color="#efeff4" ></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"  style="height: 1500rpx;">
			<swiper-item class="swiper-item" v-for="(item,index) in tabs">
				<scroll-view scroll-y style="height: 1500rpx;width: 100%;" @scrolltolower="onreachBottom">
					 <view id="demo1" class="order-box" v-for="(item, index) in tabs[current]" :key="index" @click="goOrderDetail()">
						<view class="goods-info" v-for="(items,index) in item">
							<view class="number">
								<view>{{items.message}}</view>
								<view style="font-weight: 400;font-size: 15px;">￥{{items.jifen}}</view>
							</view> 
							<view class="time">
								<view>{{items.createTime}}</view>
								<view style="color: red;">{{items.status==0?'待收益':(items.status==1?'已收益':(items.status==2?'已失效':(items.status==3?'产品购买':'自提点充值')))}}</view>
							</view> 
						</view>
					 </view>
					<u-loadmore :status="status" @loadmore="onreachBottom" />
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',	// 上拉加载
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page:1,
				limit:10,
				n:-1,	// 订单状态 
				// 分段器
				list: [{name:"全部"},{name: '待收益'}, {name: '已收益'}, {name: '已失效'}],
				// 订单数据
				tabs:[[],[],[],[]],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onLoad(opt) {
			// 根据参数显示指定的tab项
			this.current = opt.index;
			this.swiperCurrent = opt.index;
			this.ppid = opt.ppid;
			switch (opt.index){
				case '0': this.n='-1';break;// 全部
				case '1': this.n='0';break;	// 待收益
				case '2': this.n='1';break;	// 已收益
				case '3': this.n='2';break;	// 已失效
			}
			// 加载不同状态的订单
			this.getJiangliRecord(-1,0);
			this.getJiangliRecord(0,1);
			this.getJiangliRecord(1,2);
			this.getJiangliRecord(2,3);
			console.log("好家伙")
			console.log(this.tabs)
		},
		computed:{
			
		},
		filters:{
			
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
			if(this.page >= 3) return ;
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					if(this.page >= 3) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			// 加载订单数据
			getJiangliRecord(x,c){		// x表示状态，c表示tabs下标
				this.$http.get('/ppgsluishui/getdtl', {
					userid:uni.getStorageSync("usersId"),
					ppid:this.ppid,
					status:x,
					page:this.page,
					limit:this.limit
				}).then(res => {
					this.tabs[c].push(res.data.data);
				})
			},
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style scoped>
	.time{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #d1d5dd;
		padding: 10rpx 0 10rpx 0;
		border-bottom: 1rpx #c0c3cb solid;
	}
	.order-box{
		/* padding: 30rpx 50rpx 40rpx 50rpx; */
	}
	.number {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 5px;
	}
	.tips-text{
		text-align: center;
	}
	.goods-info{
		background-color: white;
		padding: 30rpx 50rpx 20rpx 50rpx;
	}												
</style>
